<template>
  <div class="box">
    <div id="main" style="width: 700px; height: 300px"></div>
    <div id="main1" style="width: 400px; height: 300px"></div>
    <div id="main2" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const data = reactive({});
onMounted(() => {
  change();
  dn();
  zx();
});
// 第一个
const change = () => {
  const chartBox = echarts.init(document.getElementById("main")); // 主要
  const option = {
    color: ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],
    title: {
      text: "Customized Radar Chart",
    },
    legend: {},
    radar: [
      {
        indicator: [
          { text: "Indicator1" },
          { text: "Indicator2" },
          { text: "Indicator3" },
          { text: "Indicator4" },
          { text: "Indicator5" },
        ],
        center: ["25%", "50%"],
        radius: 120,
        startAngle: 90,
        splitNumber: 4,
        shape: "circle",
        axisName: {
          formatter: "【{value}】",
          color: "#428BD4",
        },
        splitArea: {
          areaStyle: {
            color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
            shadowColor: "rgba(0, 0, 0, 0.2)",
            shadowBlur: 10,
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(211, 253, 250, 0.8)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(211, 253, 250, 0.8)",
          },
        },
      },
      {
        indicator: [
          { text: "Indicator1", max: 150 },
          { text: "Indicator2", max: 150 },
          { text: "Indicator3", max: 150 },
          { text: "Indicator4", max: 120 },
          { text: "Indicator5", max: 108 },
          { text: "Indicator6", max: 72 },
        ],
        center: ["75%", "50%"],
        radius: 120,
        axisName: {
          color: "#fff",
          backgroundColor: "#666",
          borderRadius: 3,
          padding: [3, 5],
        },
      },
    ],
    series: [
      {
        type: "radar",
        emphasis: {
          lineStyle: {
            width: 4,
          },
        },
        data: [
          {
            value: [100, 8, 0.4, -80, 2000],
            name: "Data A",
          },
          {
            value: [60, 5, 0.3, -100, 1500],
            name: "Data B",
            areaStyle: {
              color: "rgba(255, 228, 52, 0.6)",
            },
          },
        ],
      },
      {
        type: "radar",
        radarIndex: 1,
        data: [
          {
            value: [120, 118, 130, 100, 99, 70],
            name: "Data C",
            symbol: "rect",
            symbolSize: 12,
            lineStyle: {
              type: "dashed",
            },
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              },
            },
          },
          {
            value: [100, 93, 50, 90, 70, 60],
            name: "Data D",
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: "rgba(255, 145, 124, 0.1)",
                  offset: 0,
                },
                {
                  color: "rgba(255, 145, 124, 0.9)",
                  offset: 1,
                },
              ]),
            },
          },
        ],
      },
    ],
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
};

const dn = () => {
  var chartDom = document.getElementById("main1");
  var myChart1 = echarts.init(chartDom);
  var option = {
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%",
    },
    series: [
      {
        name: "Pressure",
        type: "gauge",
        progress: {
          show: true,
        },
        detail: {
          valueAnimation: true,
          formatter: "{value}",
        },
        data: [
          {
            value: 50,
            name: "SCORE",
          },
        ],
      },
    ],
  };

  myChart1.setOption(option);
};

const zx = () => {
  var chartDom = document.getElementById("main2");
  var myChart = echarts.init(chartDom);
  var option;

  let base = +new Date(1968, 9, 3);
  let oneDay = 24 * 3600 * 1000;
  let date = [];
  let data = [Math.random() * 300];
  for (let i = 1; i < 20000; i++) {
    var now = new Date((base += oneDay));
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
  }
  option = {
    tooltip: {
      trigger: "axis",
      position: function (pt) {
        return [pt[0], "10%"];
      },
    },
    title: {
      left: "center",
      text: "Large Area Chart",
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: date,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "100%"],
    },
    dataZoom: [
      {
        type: "inside",
        start: 0,
        end: 10,
      },
      {
        start: 0,
        end: 10,
      },
    ],
    series: [
      {
        name: "Fake Data",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        itemStyle: {
          color: "rgb(255, 70, 131)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 158, 68)",
            },
            {
              offset: 1,
              color: "rgb(255, 70, 131)",
            },
          ]),
        },
        data: data,
      },
    ],
  };

  myChart.setOption(option);
};
</script>

<style scoped lang='scss'>
.box {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#main,
#main1 {
  padding: 20px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
</style>